<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="form.nickName" autocomplete="off" readonly />
      </el-form-item>
      <el-form-item label="电话" prop="phonenumber">
        <el-input v-model="form.phonenumber" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio-button v-for="item in sexOptions" v-bind="item" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="email" prop="email">
        <el-input v-model="form.email" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item>
        <el-button v-if="false" @click="handleClickBtnCancel">取消</el-button>
        <el-button type="primary" @click="handleClickBtnSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance } from 'element-plus'
import { useUsersStore } from '../../stores'
import ResultMessage from '../../utils/ResultMessage.ts'
import http from '../../http'

const usersStore = useUsersStore().getAllState() as any
const formRef = ref<FormInstance>()
const dialogVisible = ref(false)
const sexOptions = ref([
  {
    label: '男',
    value: '0',
  },
  {
    label: '女',
    value: '1',
  },
  {
    label: '未知',
    value: '2',
  },
])

const form = ref({
  nickName: '',
  phonenumber: '',
  sex: 0,
  email: '',
})

const rules = reactive({
  nickName: [
    { required: true, message: '请输入昵称', trigger: 'change' },
    { required: true, message: '请输入昵称', trigger: 'blur' },
  ],
  phonenumber: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
  ],
  sex: [
    { required: true, message: '请输入性别', trigger: 'change' },
    { required: true, message: '请输入性别', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
  ],
})

const openDialog = () => {
  dialogVisible.value = true
  // console.log('usersStore', usersStore)
  if (usersStore) {
    form.value = {
      nickName: usersStore.nickName || '',
      phonenumber: usersStore.phonenumber || '',
      sex: usersStore.sex || 0,
      email: usersStore.email || '',
    }
  }
}

const formReset = () => {}

const handleClickBtnCancel = () => {
  formReset()
  dialogVisible.value = false
  if (!formRef.value) return
  formRef.value.resetFields()
}

const handleClickBtnSubmit = async () => {
  await getCurrentUserInfo()
  if (!formRef.value) return
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = await http({
        method: 'PUT',
        path: '/dev-api/system/user/profile',
        params: {
          phonenumber: form.value.phonenumber,
          sex: form.value.sex,
          email: form.value.email,
        },
      })

      ResultMessage(res.code, '修改个人信息')
      dialogVisible.value = false
    }
  })
}

onMounted(async () => {
  if (usersStore) {
    form.value = {
      nickName: usersStore.nickName || '',
      phonenumber: usersStore.phonenumber || '',
      sex: usersStore.sex || 0,
      email: usersStore.email || '',
    }
  }
})

const getCurrentUserInfo = async () => {
  console.log('getCurrentUserInfo', 222)
  const res = await http({
    method: 'GET',
    path: '/dev-api/system/user/profile',
  })
  console.log(res)
}

defineExpose({
  openDialog,
})
</script>
<style lang="scss" scoped></style>
